<template>
  <div class="body">
    <div class="main" v-show="!show">
      <Header :navList="navList" />
      <div class="content">
        <div class="list-content">
          <!--          <div style="height: 100%;padding: 30px;display: flex">-->
          <!--            <div style="width: 270px;">-->
          <!--              <div-->
          <!--                  style="height: 32px;line-height: 32px;font-size: 24px;color: #000000;display: flex;width: 270px;border-bottom: 2px solid #102F7A;padding-bottom: 8px">-->
          <!--                <div style="width: 8px;height: 32px;background: #102F7A;margin-right: 10px"></div>-->
          <!--                <div>{{ title }}</div>-->
          <!--              </div>-->
          <!--              <div style="padding-top: 8px">-->
          <!--                <div class="list" :class="{'is':active===index}" v-for="(item, index) in options" @click="handleCheckList(item.id,item.name, index)" :key="index">{{ item.name }}</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <div style="height: 100%;padding: 30px;display: flex">
            <!--            <div style="width: 270px;">-->
            <!--              <div-->
            <!--                  style="height: 32px;line-height: 32px;font-size: 24px;color: #000000;display: flex;width: 270px;border-bottom: 2px solid #102F7A;padding-bottom: 8px">-->
            <!--                <div style="width: 8px;height: 32px;background: #102F7A;margin-right: 10px"></div>-->
            <!--                <div>{{ title }}</div>-->
            <!--              </div>-->
            <!--              <div style="padding-top: 8px">-->
            <!--                <div class="list" :class="{'is':active===index}" v-for="(item, index) in options" @click="handleCheckList(item.id,item.name, index)" :key="index">{{ item.name }}</div>-->
            <!--              </div>-->
            <!--            </div>-->
            <div style="flex: 1;">
              <!--            <div style="flex: 1;padding-left: 30px">-->
              <div
                  style="font-size: 14px;color: #787c83;display: flex;height: 41px;line-height: 41px;border-bottom: 1px solid #cdcdcd">
                <div style="margin-right: 8px;cursor: pointer;" @click="handleHome"><i class="el-icon-s-home" style="margin-right: 4px"></i>首页</div>
                <div style="margin-right: 8px">></div>
                <!--                <div style="margin-right: 8px">{{ title }}</div>-->
                <div style="margin-right: 8px">全文检索</div>
              </div>
              <div style="margin: 35px 0;font-size: 36px;text-align: center"></div>
              <div style="padding-top: 8px" v-for="item in detailList" :key='item.moduleId'>
                <div style="height: 32px;line-height: 32px;font-size: 16px;color: #000000;display: flex;width: 270px;;padding-bottom: 8px">
                  <div style="width: 8px;height: 32px;background: #60A3D7;margin-right: 10px"></div>
                  <div>{{ item.moduleName }}</div>
                </div>
                <div class="list-news" v-for="res in item.articleList" :key="res.id" @click="handleNews(res)">
                  <div style="display: flex;align-items: center;">
                    <div class="list-mark"></div>
                    <div class="list-title">{{ res.name }}</div>
                  </div>
                  <div style="width: 160px">
                    {{ res.createDate }}
                  </div>
                </div>
                <el-divider></el-divider>
              </div>
              <div style="margin-top: 12px;text-align: center">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-sizes="[15, 30, 45]"
                    :page-size="100"
                    layout="total, prev, pager, next, sizes"
                    :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer/>
    </div>
  </div>

</template>

<script>
import {getList, getSearchApi} from "@/api/home";
// import { quillEditor } from "vue-quill-editor";
// import Nav from "@/templates/Nav";
import Header from "@/templates/Layout/MoreHeader.vue";
import Footer from "@/templates/Layout/Footer.vue";
import { getBubbleSort } from "@/util/util";

export default {
  components: {
    Footer,
    Header,
  },
  data() {
    return {
      active: 0,
      total: 0,
      title: '',
      paused: false,
      notice: [],
      news: [],
      fileList: [],
      show: true,
      userName: '',
      moduleName: '',
      createDate: '',
      form: {
        value: ''
      },
      detailList: [],
      navList: [],
      page: {
        pageNum: 1,
        pageSize: 15
      }
    }
  },

  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await getList()
      this.navList = this.getNavBarList(res.navList, res.orgList)
      if (this.$route.query.search) {
        const res = await getSearchApi({keyword: this.$route.query.search, ...this.page})
        this.detailList = res.records
        this.total = Number(res.total)


        // this.title = res.articleTitle
        // this.content = res.content
        // this.userName = res.userName
        // this.moduleName = res.moduleName
        // this.createDate = res.createDate
        // res.attachmentList.forEach((item) => {
        //   if (item.attrType === 1) {
        //     this.fileList.push(item);
        //   }
        // });
      }
      this.show = false
      this.title = this.options[0].name
    },
    getNavBarList(nav, org) {
      org[0].moduleName = '工作动态'
      org[0].order = 20
      nav[0].children.push(org[0])
      // const a = getBubbleSort(nav[0].children)
      return nav[0].children.sort(getBubbleSort('order', 1))
    },
    handleHome() {
      window.open('#', '_blank')
    },
    handleCheckList(id, name, index) {
      this.active = index
      this.title = name
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getList()
    },
    handleNews(row) {
      if (row.outHref) {
        window.open(row.outHref)
      } else {
        if (row.id) {
          const {href} = this.$router.resolve({
            path: `/news`,
            query: {
              id: row.id,
              type: row.bizType
            }
          });
          window.open(href, '_blank');
        }
      }
    },
  }
}
</script>

<style lang="less" scoped>
.body {
  background: #fff;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.main {
  background: #fff;
  height: 100%;
  width: 100%;
  display: table;
}

.content {
  width: 100%;
  height: 100%;
  margin: 24px 0;
  display: flex;
  justify-content: center;
}

.list-content {
  min-height: calc(100vh - 210px - 60px - 60px - 48px);
  width: 1200px;
  background: #fff;
}

.a {
  background: #ECF1F7;
}

.list {
  height: 48px;
  width: 100%;
  font-size: 16px;
  text-align: center;
  line-height: 48px;
  cursor: pointer;
  background: #f4f4f5;
}

.list:not(:last-child) {
  border-bottom: 1px solid #cdcdcd;
}

.list:hover {
  background: #60A3D7;
  color: #fff;
}

.list-news {
  font-size: 15px;
  color: #444;
  line-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.list-mark {
  width: 5px;
  height: 5px;
  background: #60A3D7;
  margin-right: 10px;
}

.list-title {
  cursor: pointer;
}

.is {
  background: #60A3D7;
  color: #fff;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #60A3D7;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #60A3D7;
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}

</style>
